<template>
  <img :src="url" alt="language-switch" class="language-switch" @click="toggleLuaguage">
</template>

<script>
import { loadLanguageAsync } from '../i18n'

export default {
  name: 'LanguageSwitch',
  data () {
    return {
      language: 'cn'
    }
  },
  computed: {
    url () {
      return require('../assets/language_' + this.language + '_icon.png')
    }
  },
  created () {
    let lang = localStorage.getItem('magic3_lang') || 'cn'
    this.language = lang
    if (lang === 'en') {
      loadLanguageAsync('en')
    }
  },
  methods: {
    toggleLuaguage () {
      this.language = this.language === 'cn' ? 'en' : 'cn'
      localStorage.setItem('magic3_lang', this.language)
      loadLanguageAsync(this.language)
    }
  }
}
</script>

<style lang="less">
.language-switch {
  display: inline-block;
  cursor: pointer;
  margin-top: 7px;
  margin-right: 7%;
}
</style>
